<template>
    <div style='height:100%;' ref='containerRef'>
		<v-chart v-if='value' autoresize :option='options'></v-chart>
        <XLoading v-else></XLoading>
	</div>
</template>

<script lang='ts'>
    import { use } from "echarts/core";
    import { LineChart } from 'echarts/charts'
    import "echarts/lib/component/markPoint";
    use([LineChart])

    import { defineComponent, reactive, ref, toRef, computed } from "vue";
    interface Props {
		modelValue : {
            date : any[],
            count : any[],
			rate : any[]
        };
	}

    export default defineComponent({
        props : {
			modelValue : {
				type : Object,
				default : function() {
					return null
				}
			}
		},

        setup(props:Props) {
            const value = toRef(props, 'modelValue')
            
            const options = computed(() => {
                var options =  {
                    textStyle : {
                        fontFamily : 'sans-serif 微软雅黑'
                    },
                    tooltip : {
						show : true,
						trigger : 'axis',
                        formatter: '{b0}<br />{a0} <span class="m-l-20">{c0}</span><br />{a1} <span class="m-l-20">{c1}%</span>'
					},

					grid : {
						top : '30px',
						bottom : '20px',
					},

                    xAxis: [
                        {
                            type: 'category',
                            axisLine : {
                                lineStyle : {
                                    color : '#becded'
                                }
                            },
                            axisTick : {
                                show : false
                            },
                            axisLabel : {
                                show : true,
                                color : '#becded'
                            },
                            data: value.value.date
                        }
                    ],

                    yAxis : [
                        {
                            name : '下单数（笔）',
                            nameLocation : 'end',
                            nameTextStyle : {
                                color:'#fff'
                            },
                            type: 'value',
                            axisLine : {
                                show : true,
                                lineStyle : {
                                    color : '#becded'
                                }
                            },
                            // axisTick : {
                            //     show : true
                            // },

                            axisLabel : {
                                show : true,
                                color : '#becded'
                            },

                            splitLine : {
                                show : false
                            }
                        },

                        {
                            name : '使用率',
                            nameLocation : 'end',
                            max : 100,
                            nameTextStyle : {
                                color:'#fff'
                            },
                            type: 'value',
                            axisLine : {
                                show : true,
                                lineStyle : {
                                    color : '#becded'
                                }
                            },
                            // axisTick : {
                            //     show : true
                            // },

                            axisLabel : {
                                show : true,
                                color : '#becded',
                                formatter: '{value}%'
                            },

                            splitLine : {
                                show : false,
                            },
                            
                        },
                    ],

                    series : [
                        {
                            name : '下单数（笔）',
                            smooth : true,
                            symbol : 'none',
                            type: 'line',
                            itemStyle : {
                                color : '#69baf9'
                            },
                            data : value.value.count,
                            // markPoint: {
                            //     label : {
                            //         show :true,
                            //         color: '#fff'
                            //     },
                            //     itemStyle : {

                            //     },
                            //     data: [
                            //         {type: 'max', name: '最大值'},
                            //         {type: 'min', name: '最小值'}
                            //     ]
                            // },
                            
                        },
                        {
                            name : '使用率',
                            smooth : true,
                            yAxisIndex: 1,
                            symbol : 'none',
                            type: 'line',
                            itemStyle : {
                                color : '#c22929'
                            },
                            data : value.value.rate
                        }
                    ]
                }
                return options
            })

            return {
                value,
                options
            }
        }
    })
</script>